<template>
	<el-button @click="toggle">isFullscreen:{{ isFullscreen }}</el-button>

	<div ref="elRef" class="bg-red fixed" :style="style">Drag me! I am at {{ x }}, {{ y }}</div>
</template>

<script setup lang="ts">
import { useDraggable, useWindowSize, useFullscreen } from '@vueuse/core';
import { ref, watchEffect } from 'vue';

// 拖拽
const elRef = ref<HTMLElement | null>(null);
const { x, y, style } = useDraggable(elRef, {
	initialValue: { x: 300, y: 300 },
	preventDefault: true,
});

// 监听窗口大小
const { width, height } = useWindowSize();
watchEffect(() => {
	console.log(`窗口大小：${width.value} x ${height.value}`);
});

// 全屏
const { isFullscreen, enter, exit, toggle } = useFullscreen();
</script>

<style scoped></style>
